<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.js"></script>
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<form class="form">
    <div class="row">
        <div class="col">
            <div class="input-group">
                <span class="input-group-addon">类型：</span>
                <div class="form-group">
                    <input type="text" name="type" class="form-control">
                </div>
            </div>
        </div>
        <div class="col"></div>
        <div class="col">
            <button type="button" class="btn btn-success" onclick="refresh()">重置</button>
            <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
        </div>
    </div>
</form>
<table id="roleTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
</body>
<script>

    $('#roleTable').bootstrapTable({
    method: 'get', // 服务器数据的请求方式 get or post
    url: "/mybatis/pagelist", // 服务器数据的加载地址
    pagination: true, //是否显示分页（*）
    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
    pageSize: 5, //每页的记录行数（*）
    pageList: [5, 25, 50, 100], //可供选择的每页的行数（*）
    queryParams: function(params) {
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1,
            type: $(".form").find("input[name='type']").val().trim()
        };
    },
    columns: [{
        checkbox: true
    },{
        field: 'id',
        title: '资料ID'
    },{
        field: 'type',
        title: '资料类型'
    }, {
        field: 'content',
        title: '内容'
    }
    ]
});

// 搜索方法
function search() {
    $('#roleTable').bootstrapTable('refresh');
}
// 重置方法
function refresh() {
    $(".form")[0].reset();
    search();
}
</script>
</html>